<template>
  <div>
    <el-descriptions
      class="detail-descriptions"
      contentClassName="content-class"
      labelClassName="label-class"
      :title="this.$t('触达任务信息')"
      :column="3"
      border
    >
      <el-descriptions-item :span="3" :label="this.$t('任务ID')"> {{ touchData.id }} </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('任务标题')"> {{ touchData.title }} </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('发送渠道')">
        {{ touchData.msgChannel }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('消息跟催ID')">
        {{ touchData.followId }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('任务是否排他')" v-if="showProp.exclusive">
        {{ touchData.exclusive }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('回调url')" v-if="showProp.notifyUrl">
        {{ touchData.notifyUrl }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('D-Chat模版ID')" v-if="showProp.dcFormId">
        {{ touchData.dcFormId }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('邮件模版ID')" v-if="showProp.templateId">
        {{ touchData.templateId }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('发送账号')">
        {{ touchData.sender }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('接收方式')" v-if="showProp.receiverOrVchannelId">
        {{ touchData.receiverOrVchannelId }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('群会话ID')" v-if="showProp.vChannelId">
        {{ touchData.vChannelId }}
      </el-descriptions-item>
      <el-descriptions-item :span="3" :label="this.$t('任务接收者')" v-if="showProp.receiver">
        <div style="display: flex; justify-content: space-between">
          <div class="over-ellipsis-3">
            {{ touchData.receiver }}
          </div>
          <el-button type="text" style="margin: 0 10px" @click="receiverDialogVisible = true">{{
            this.$t("查看详情")
          }}</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="showProp.content"
        content-class-name="my-content"
        :span="3"
        :label="this.$t('消息内容')"
      >
        <div style="display: flex; justify-content: space-between">
          <div class="over-ellipsis-5">
            {{ touchData.content }}
          </div>
          <el-button type="text" style="margin: 0 10px" @click="contentDialogVisible = true">{{
            this.$t("查看详情")
          }}</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :span="3" v-if="showProp.variables" :label="this.$t('模板变量')">
        <div style="display: flex; justify-content: space-between">
          <div class="over-ellipsis-5">
            {{ touchData.variables }}
          </div>
          <el-button type="text" style="margin: 0 10px" @click="variablesDialogVisible = true">{{
            this.$t("查看详情")
          }}</el-button>
        </div>
      </el-descriptions-item>

      <el-descriptions-item :span="3" :label="this.$t('状态')">
        {{ utils.getDicLabel("status", touchData.status) }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- dialog 需放在外部 -->
    <el-dialog :title="this.$t('消息接收账号')" :visible.sync="receiverDialogVisible" width="60%" append-to-body>
      <span>{{ touchData.receiver }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="receiverDialogVisible = false">{{ this.$t("关闭") }}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="this.$t('消息内容')" :visible.sync="contentDialogVisible" width="80%" append-to-body>
      <div>
        <div v-if="isDcMsgChannel" style="margin-top: -5px">
          <mavon-editor
            v-model="touchData.content"
            :toolbars="{ subfield: true, fullscreen: true, readmodel: true }"
            :toolbarsFlag="true"
            :editable="false"
            defaultOpen="preview"
          />
        </div>
        <pre
          v-if="!isDcMsgChannel"
          v-html="touchData.content"
          style="margin-top: -20px; padding: 10px; white-space: pre-wrap"
        ></pre>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="contentDialogVisible = false">{{ this.$t("关闭") }}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="this.$t('模板变量JSON')" :visible.sync="variablesDialogVisible" width="60%" append-to-body>
      <pre>{{ touchData.variables ? JSON.stringify(JSON.parse(touchData.variables), null, 4) : "-" }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="variablesDialogVisible = false">{{ this.$t("关闭") }}</el-button>
      </span>
    </el-dialog>
    <!-- dialog 结束 -->
  </div>
</template>

<script>
import { touchDetailTaskApi } from "api/dataCenter.js";
export default {
  components: {},
  props: {
    touchId: String || "", //touchID
    detailData: Object || {}, //详情数据
    needRequest: Boolean || false, //是否需要请求获取数据
  },
  data() {
    return {
      touchData: {},
      receiverDialogVisible: false,
      contentDialogVisible: false,
      variablesDialogVisible: false,
      showProp: {},
      isDcMsgChannel: false,
    };
  },
  watch: {
    touchId: {
      handler(newVal) {
        this.initDetail();
      },
    },
    detailData: {
      handler(newVal) {
        this.initDetail();
      },
    },
  },
  computed: {},
  methods: {
    initDetail() {
      if (this.needRequest) {
        touchDetailTaskApi({
          requestData: this.touchId,
        }).then((res) => {
          if (res.code === 0) {
            this.formatterData(res.data);
          }
        });
      } else {
        this.formatterData(this.detailData);
      }
    },
    formatterData(data) {
      // console.log(data);
      let { msgChannel, exclusive, followId, notifyUrl, dcFormId, templateId, vChannelId } = data;
      this.touchData = {
        ...data,
        msgChannel: this.utils.getDicLabel("msgChannel", msgChannel),
        followId: followId ? followId : "-",
        exclusive: this.utils.getDicLabel("exclusive", exclusive),
        notifyUrl: notifyUrl ? notifyUrl : "-",
        dcFormId: dcFormId ? dcFormId : "-",
        templateId: templateId ? templateId : "-",
        receiverOrVchannelId: this.utils.getDicLabel("receiverOrVchannelId", !vChannelId),
      };
      this.isDcMsgChannel = msgChannel == 1;
      this.showProp = {
        ...this.showProp,
        exclusive: this.isDcMsgChannel,
        notifyUrl: exclusive,
        dcFormId: this.isDcMsgChannel,
        templateId: !this.isDcMsgChannel,
        receiverOrVchannelId: this.isDcMsgChannel,
        vChannelId: vChannelId,
        receiver: !vChannelId,
        content: this.isDcMsgChannel ? !dcFormId : !templateId,
        variables: this.isDcMsgChannel ? dcFormId : templateId,
      };
    },
  },
  created() {},
  mounted() {
    this.initDetail();
  },
};
</script>
<style scoped lang="scss">
// ::v-deep .el-drawer__body {
//   padding: 0 20px;
// }
.detail-descriptions {
  margin: 10px 0px;
}
::v-deep .content-class {
  word-wrap: break-word;
  word-break: break-all;
}
::v-deep .label-class {
  width: 100px;
}
.detail-bottom {
  display: flex;
  justify-content: center;
  .detail-button {
    padding: 15px 10px 10px 10px;
  }
}
</style>
<style lang="scss" scoped></style>
